<template>
    <div>
        <div class="tuwen_box">
            <el-form>
                <el-form-item  v-for="(item,i) of active_component.propValue.list" :key="i">
                   <div class="flex">
                     <el-input style="width:180px;" v-model="item.label"></el-input>
                     <el-input v-model="item.value"></el-input>
                     <el-button icon="el-icon-delete" type="danger" size="small" @click="delFooterlist(i)"></el-button>
                   </div>
                </el-form-item>
                 <el-form-item >
                   <div class="flex">
                     <el-input style="width:180px;" value="版权所有" disabled></el-input>
                     <el-input v-model="active_component.propValue.copyright"></el-input>
                   </div>
                </el-form-item>
                 <el-form-item>
                   <el-button type="primary" size="small" @click="addFooterlist">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex-center" style="margin-top:10px;">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
export default {
  props: ["componentId", "componentList","activeCompont"],
  data() {
    return {
      name: "",
      active_component: {},
    };
  },

  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },

  methods: {
    closeTK(){
        this.$emit("closeTK")
        },
    delFooterlist(i){
       this.active_component.propValue.list.splice(i,1)
    },
    addFooterlist(){
      this.active_component.propValue.list.push({label:'请输入名称',value:'请输入对应描述'})
    },
    pushcanvas() {
            if(this.activeCompont){
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = Number(canvasStyle.height);
                component.style.left = 0;

               this.$store.commit("addComponent", { component: component });
              canvasStyle.height = String(
                Number(canvasStyle.height) + Number(component.style.height)
              );
              this.$store.commit("setCanvasStyle", canvasStyle);
              this.$emit("closeTK")//关闭弹框
            }
        },
    // deleteItem(list,i){
    //     list.splice(i,1)
    // },

  },
};
</script>

<style lang="scss" scoped>

</style>

